<template>
	<view :style="themeColor">
		<view class="page">
			<view class="flex align-stretch benben-position-layout flex commodityList_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex align-center flex-sub commodityList_fd0_0'>
					<view class='flex align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
						<text class='fu-iconfont2  commodityList_fd0_0_c0_c0'>&#xE794;</text>
					</view>
					<view class='flex align-center commodityList_fd0_0_c1001' v-if=" appSystemIdentification=='Wechat'">
						<text class='fu-iconfont2  commodityList_fd0_0_c1_c0'
							@tap.stop="topSearchFunc()">&#xe738;</text>
						<benben-input class='flex-sub commodityList_fd0_0_c1_c1' type="text" :focus='true'
							:placeholder="`请输入商品名称`" confirm-type="done" :maxlength="200"
							placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" @confirm="topSearchFunc()"
							v-model="keyword" />
						<image class='commodityList_fd0_0_c1_c2' mode="aspectFit" :src='STATIC_URL+"490.png"'
							@tap.stop="cleanKeywordFunc()" v-if="keyword!=''"></image>
					</view>
					<view class='flex align-center commodityList_fd0_0_c1' v-if=" appSystemIdentification!='Wechat'">
						<text class='fu-iconfont2  commodityList_fd0_0_c1_c0'
							@tap.stop="topSearchFunc()">&#xe738;</text>
						<benben-input class='flex-sub commodityList_fd0_0_c1_c1' type="text" :focus='true'
							:placeholder="`请输入商品名称`" confirm-type="done" :maxlength="200"
							placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" @confirm="topSearchFunc()"
							v-model="keyword" />
						<image class='commodityList_fd0_0_c1_c2' mode="aspectFit" :src='STATIC_URL+"490.png"'
							@tap.stop="cleanKeywordFunc()" v-if="keyword!=''"></image>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<view
				class="flex flex-direction align-stretch justify-center benben-position-layout flex commodityList_flex_1"
				:style="{top:(87+StatusBarRpx)+'rpx', }">
				<view class='flex align-center self-center justify-between flex-sub commodityList_fd1_0'>
					<view class='flex align-center commodityList_fd1_0_c0' @tap.stop="switchComprehensiveFunc()">
						<text class='commodityList_fd1_0_c0_c0' v-if="sort_field!='1'">综合</text><text
							class='commodityList_fd1_0_c0_c0_1' v-if="sort_field=='1'">综合</text>
					</view>
					<view class='flex align-center commodityList_fd1_0_c0' @tap.stop="switchShopListFunc(2)"
						v-if="showId=='1'">
						<text class='commodityList_fd1_0_c1_c0' v-if="sort_field!='2'">销量</text><text
							class='commodityList_fd1_0_c1_c0_1' v-if="sort_field=='2'">销量</text>
						<image class='commodityList_fd1_0_c1_c1' mode="aspectFit" :src='STATIC_URL+"491.png"'
							v-if="sort_field!='2'"></image>
						<image class='commodityList_fd1_0_c1_c1' mode="aspectFit" :src='STATIC_URL+"492.png"'
							v-if="sort_field=='2' && sort_type=='desc'"></image>
						<image class='commodityList_fd1_0_c1_c1' mode="aspectFit" :src='STATIC_URL+"493.png"'
							v-if="sort_field=='2' && sort_type=='asc'"></image>
					</view>
					<view class='flex align-center commodityList_fd1_0_c0' @tap.stop="switchShopListFunc(3)"
						v-if="showId=='1'">
						<text class='commodityList_fd1_0_c1_c0' v-if="sort_field!='3'">价格</text><text
							class='commodityList_fd1_0_c2_c0_1' v-if="sort_field=='3'">价格</text>
						<image class='commodityList_fd1_0_c1_c1' mode="aspectFit" :src='STATIC_URL+"491.png"'
							v-if="sort_field!='3'"></image>
						<image class='commodityList_fd1_0_c1_c1' mode="aspectFit" :src='STATIC_URL+"492.png"'
							v-if="sort_field=='3' && sort_type=='desc'"></image>
						<image class='commodityList_fd1_0_c1_c1' mode="aspectFit" :src='STATIC_URL+"493.png"'
							v-if="sort_field=='3' && sort_type=='asc'"></image>
					</view>
					<view class='flex flex-wrap align-center' @tap.stop="switchcutFunc()">
						<image class='commodityList_fd1_0_c3_c0' mode="aspectFit" :src='STATIC_URL+"494.png"'
							v-if="waterfall"></image>
						<image class='commodityList_fd1_0_c3_c0' mode="aspectFit" :src='STATIC_URL+"495.png"'
							v-if="!waterfall"></image>
					</view>
					<view class='flex flex-wrap align-center'>
						<view class='flex flex-wrap align-center' @tap.stop="popupShow1696735753286=true">
							<text class='commodityList_fd1_0_c4_c0_c0'>筛选</text>
							<image class='commodityList_fd1_0_c4_c0_c1' mode="aspectFit" :src='STATIC_URL+"496.png"'>
							</image>
						</view>
					</view>
				</view>

			</view>
			<view :style="{height: '100rpx'}"></view>
			<!---商品列表_商品1flex布局开始-->
			<view class="flex flex-wrap align-stretch benben-flex-layout commodityList_flex_2" v-if="waterfall">
				<template v-for='(item,key0) in goods_List'>
					<view class='flex align-stretch commodityList_fd2_0' @tap.stop="handleJumpDiy"
						data-type="navigateTo"
						:data-url="`/pages/newShop/goodsDetails/goodsDetails?shop_id=${item.aid}`" :key='key0'>
						<image class='commodityList_fd2_0_c0' mode="aspectFill" :src='item.thumb'></image>
						<view
							class='flex flex-direction flex-wrap align-stretch justify-between flex-sub commodityList_fd2_0_c1'>
							<text class='commodityList_fd2_0_c1_c0'>{{item.name}}</text>
							<view class='flex flex-wrap align-center'>
								<text class='commodityList_fd2_0_c1_c1_c0'>¥</text>
								<text class=' commodityList_fd2_0_c1_c1_c1'>
									<text
										class=' commodityList_price1_fd2_0_c1_c1_c1'>{{ item.shop_price | frontPrice }}</text>
									<text
										class=' commodityList_price2_fd2_0_c1_c1_c1'>{{ item.shop_price | laterPrice }}</text>
								</text>
							</view>
							<view class='flex flex-wrap align-center'>
								<text class='commodityList_fd2_0_c1_c2_c0'>¥</text>
								<text class='commodityList_fd2_0_c1_c2_c1'>{{item.market_price}}</text>
								<text class='commodityList_fd2_0_c1_c2_c2'>销量</text>
								<text class='commodityList_fd2_0_c1_c2_c3'>{{item.sales_sum}}</text>
							</view>
						</view>
					</view>
				</template>
				<fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
					:listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
			</view>

			<!---商品列表_商品1flex布局结束-->
			<benben-popup v-model="popupShow1696735753286" :mask="true" :mask-close-able="true" mode='right'>
				<!---筛选弹窗flex布局开始-->
				<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout commodityList_flex_3">
					<view class='flex flex-wrap align-center justify-between commodityList_fd3_0'>
						<text class='commodityList_fd3_0_c0'>筛选</text>
					</view>
					<view class='flex flex-direction flex-wrap align-stretch flex-sub'>
						<view class='flex flex-wrap align-center justify-between commodityList_fd3_1_c0'>
							<text class='commodityList_fd3_1_c0_c0'>品类</text>
						</view>
						<benben-select-diy ref="showSelectPopup1696735862957"
							class-name='flex flex-wrap flex commodityList_fd3_1_c1' :items.sync="dataDrandList"
							v-model="brand_id" default-type="aid" default-label="name" :allow-cancel='true' type="radio"
							:disabled='false'>
							<template v-for='(item,key0) in dataDrandList'>
								<view v-if="item.isSelected"
									class='flex align-center self-center justify-center flex commodityList_fd3_1_c1_c0'
									:key="key0" @tap="$refs.showSelectPopup1696735862957.tapHandle(key0)">
									<text class='commodityList_fd3_1_c1_c0_c0'>{{item.name}}</text>
								</view>
								<view v-else class='flex align-center justify-center flex commodityList_fd3_1_c1_c1'
									:key="key0" @tap="$refs.showSelectPopup1696735862957.tapHandle(key0)">
									<text class='commodityList_fd3_1_c1_c1_c0'>{{item.name}}</text>
								</view>
							</template>
						</benben-select-diy>
					</view>
					<view class='flex flex-direction flex-wrap align-stretch flex-sub commodityList_fd3_2'>
						<view class='flex flex-wrap align-center justify-between commodityList_fd3_1_c0'>
							<text class='commodityList_fd3_2_c0_c0'>价格</text>
						</view>
						<benben-price-range :min-price.sync="min_price" :max-price.sync="max_price"
							active-color='#FD513D' price-color='#f8f8f8' name-key='name' max-key='max' min-key='min'>

						</benben-price-range>
					</view>
					<view class='flex flex-direction flex-wrap align-stretch flex-sub'>
						<view class='flex flex-wrap align-center justify-center commodityList_fd3_3_c0'>
							<button class='commodityList_fd3_3_c0_c0' @tap.stop="resettingFunc()">重置</button>
							<button class='commodityList_fd3_3_c0_c1' @tap.stop="confirmFunc()">确认</button>
						</view>
					</view>
				</view>

				<!---筛选弹窗flex布局结束-->

			</benben-popup>
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center commodityList_flex_4001" v-if="!waterfall">
				<view class='flex-sub'>
					<benben-waterfalls ref="waterfalls1711096109936" :waterfall-data.sync="waterfallsfd4_0"
						v-model="goods_List" id-key="aid" add-time="200" column-count="2" left-gap="20" right-gap="20"
						column-gap="20">
						<template #list1>
							<view>
								<template v-for="(item, key0) in waterfallsfd4_0.list1">
									<view class='flex flex-direction align-stretch commodityList_fd4_0_c0'
										@tap.stop="handleJumpDiy" data-type="navigateTo"
										:data-url="`/pages/newShop/goodsDetails/goodsDetails?shop_id=${item.aid}`"
										:key='key0'>
										<image class='commodityList_fd4_0_c0_c0' mode="widthFix" :src='item.thumb'>
										</image>
										<text class='commodityList_fd4_0_c0_c1'>{{item.name}}</text>
										<view class='flex flex-wrap align-center commodityList_fd4_0_c0_c2'>
											<text class='commodityList_fd4_0_c0_c2_c0'>¥</text>
											<text class=' commodityList_fd4_0_c0_c2_c1'>
												<text
													class=' commodityList_price1_fd4_0_c0_c2_c1'>{{ item.shop_price | frontPrice }}</text>
												<text
													class=' commodityList_price2_fd4_0_c0_c2_c1'>{{ item.shop_price | laterPrice }}</text>
											</text>
										</view>
										<view class='flex flex-wrap align-center commodityList_fd4_0_c0_c3'>
											<text class='commodityList_fd4_0_c0_c3_c0'>¥</text>
											<text class='commodityList_fd4_0_c0_c3_c1'>{{item.market_price}}</text>
											<text class='commodityList_fd4_0_c0_c3_c2'>销量</text>
											<text class='commodityList_fd4_0_c0_c3_c3'>{{item.sales_sum}}</text>
										</view>
									</view>

								</template>
							</view>
						</template><template #list2>
							<view>
								<template v-for="(item, key0) in waterfallsfd4_0.list2">
									<view class='flex flex-direction align-stretch commodityList_fd4_0_c0'
										@tap.stop="handleJumpDiy" data-type="navigateTo"
										:data-url="`/pages/newShop/goodsDetails/goodsDetails?shop_id=${item.aid}`"
										:key='key0'>
										<image class='commodityList_fd4_0_c0_c0' mode="widthFix" :src='item.thumb'>
										</image>
										<text class='commodityList_fd4_0_c0_c1'>{{item.name}}</text>
										<view class='flex flex-wrap align-center commodityList_fd4_0_c0_c2'>
											<text class='commodityList_fd4_0_c0_c2_c0'>¥</text>
											<text class=' commodityList_fd4_0_c0_c2_c1'>
												<text
													class=' commodityList_price1_fd4_0_c0_c2_c1'>{{ item.shop_price | frontPrice }}</text>
												<text
													class=' commodityList_price2_fd4_0_c0_c2_c1'>{{ item.shop_price | laterPrice }}</text>
											</text>
										</view>
										<view class='flex flex-wrap align-center commodityList_fd4_0_c0_c3'>
											<text class='commodityList_fd4_0_c0_c3_c0'>¥</text>
											<text class='commodityList_fd4_0_c0_c3_c1'>{{item.market_price}}</text>
											<text class='commodityList_fd4_0_c0_c3_c2'>销量</text>
											<text class='commodityList_fd4_0_c0_c3_c3'>{{item.sales_sum}}</text>
										</view>
									</view>

								</template>
							</view>
						</template>
					</benben-waterfalls>
				</view>
				<fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
					:listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
			</view>

			<!---flex布局flex布局结束-->


		</view>
	</view>
</template>
<script>
	import pagingList from '@/common/mixin/paging_list.js';
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},
		mixins: [pagingList],

		data() {
			return {
				"waterfallsfd4_0": {
					list1: [],
					list2: [],
					list3: [],
					list4: [],
					list5: [],
				},
				"popupShow1696735753286": false,
				"minixPagingListsApi": "",
				"pageingListApiMethod": "",
				"allowOnloadGetList": false,
				"cut": "1",
				"brand_type": [{
					"name": "钙尔奇",
					"value": "1",
					"image": ""
				}, {
					"name": "汤臣倍健",
					"value": "2",
					"image": ""
				}, {
					"name": "哈药",
					"value": "3",
					"image": ""
				}],
				"brand_id": "",
				"price_type": [{
					"name": "0-90",
					"value": "0,90",
					"image": ""
				}, {
					"name": "100-199",
					"value": "100,199",
					"image": ""
				}, {
					"name": "200-299",
					"value": "200,299",
					"image": ""
				}, {
					"name": "300-599",
					"value": "300,599",
					"image": ""
				}, {
					"name": "599元+",
					"value": "599",
					"image": ""
				}],
				"price_id": "",
				"acut": "1",
				"goods_List": [],
				"dataDrandList": [],
				"dataShopList": [],
				"sort_field": "1",
				"sort_type": "desc",
				"showId": "1",
				"min_price": "",
				"max_price": "",
				"cartNum": {
					"count": ""
				},
				"money": 0,
				"areaId": "",
				"waterfall": true,
				"keyword": "",
				"cid": ""
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},
			isLogin() {
				return this.$store.state.token == '' ? false : true;
			},
			/**
			 * @returns 
			 * Android       安卓
			 * IOS       苹果
			 * Web       H5 或 pc
			 * Wechat       微信小程序
			 * Alipay       支付宝小程序
			 * Baidu       百度小程序
			 * ByteBounce       抖音小程序
			 * 360       360小程序
			 * FastApp       快应用
			 */
			appSystemIdentification() {
				return this.$store.state.appSystemIdentification
			}
		},
		watch: {},
		onLoad(options) {
			let {
				keyword,
				cid
			} = options
			if (keyword !== undefined) this.keyword = keyword
			if (cid !== undefined) this.cid = cid
			this.goodsListFunc()
			this.queryDrandListFunc()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {
			this.goodsListFunc()
		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//清空关键词
			cleanKeywordFunc() {
				this.keyword = ''
				// if (this.showId == '1') {
				// 	this.goodsListFunc()
				// } else {
				// 	this.Func()
				// }
			},
			//切换商品排序
			switchShopListFunc(type) {
				this.sort_field = type;
				if (this.sort_type == 'desc') {
					this.sort_type = 'asc';
				} else {
					this.sort_type = 'desc';
				}
				this.showId = '1';
				this.goodsListFunc()
			},
			//获取商品列表1
			goodsListFunc() {
				this.$refs.waterfalls1711096109936?.refresh();
				this.minixPagingListsApi = global.apiUrls.post64184ac1cafc3;
				this.pageingListApiMethod = 'post';
				this.allowOnloadGetList = false;
				this.pagingListPostDataContent = {
					keyword: this.keyword,
					order: this.sort_type,
					sort: this.sort_field,
					cid: this.cid,
					business_parameters: 'synthesize',
					max_price: this.max_price,
					brand_id: this.brand_id,
					min_price: this.min_price,
					goods_type: '0'
				}
				this.listData = [];
				this.goods_List = this.listData;
				this.pagingListToggle();

			},
			//综合切换
			switchComprehensiveFunc() {
				this.sort_field = '1';
				this.showId = '1';
				this.goodsListFunc()
			},
			//商品管理-获取品牌列表
			async queryDrandListFunc() {
				//请求方法
				//数据验证

				let datadataDrandList = await this.$api.get(global.apiUrls.post63e36c4963fb8, {

				});

				if (datadataDrandList.data.code != 1) {
					this.$message.info(datadataDrandList.data.msg);
					return
				}
				let infodataDrandList = datadataDrandList.data;
				this.dataDrandList = infodataDrandList.data

			},
			//宫格列表切换
			switchcutFunc() {
				this.waterfall = !this.waterfall
			},
			//切换商品店铺
			switchShopStoreFunc() {
				this.showId = '2';
				this.sort_field = '';
				this.Func()
			},
			//顶部搜索
			topSearchFunc() {
				this.$store.commit('appSearchHistoryAdd', {
					"name": this.keyword
				})
				if (this.showId == '1') {
					this.goodsListFunc()
				} else {
					this.Func()
				}
			},
			//重置
			resettingFunc() {
				this.brand_id = '';
				this.min_price = '';
				this.max_price = '';
			},
			//确认
			confirmFunc() {
				let max_money = parseInt(this.max_price)
				let min_money = parseInt(this.min_price)
				if (max_money < min_money) {
					this.min_price = max_money
					this.max_price = min_money
				}
				this.popupShow1696735753286 = false;
				this.goodsListFunc()
			},
			pagingListPostData() {
				return this.pagingListPostDataContent
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;
	}

	.commodityList_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.commodityList_fd0_0_c1_c2 {
		width: 22rpx;
		height: 22rpx;
		margin-left: 16rpx;
	}

	.commodityList_fd0_0_c1_c1 {
		font-size: 28rpx;
		font-weight: 400;
		color: var(--benbenFontColor0);
	}

	.commodityList_fd0_0_c1_c0 {
		font-size: 24rpx;
		color: rgba(153, 153, 153, 1);
		margin: 0rpx 14rpx 0rpx 0rpx;
	}

	.commodityList_fd0_0_c1001 {
		background: #F9F9F9;
		height: 64rpx;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		padding: 0rpx 24rpx 0rpx 24rpx;
		margin: 0rpx 0rpx 0rpx 32rpx;
		width: 400rpx;
	}

	.commodityList_fd0_0_c1 {
		background: #F9F9F9;
		height: 64rpx;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		padding: 0rpx 24rpx 0rpx 24rpx;
		margin: 0rpx 0rpx 0rpx 32rpx;
		width: 600rpx;
	}

	.commodityList_fd0_0_c0_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	.commodityList_fd0_0 {
		padding: 0rpx 24rpx 0rpx 24rpx;
		line-height: 88rpx;
	}

	.commodityList_flex_1 {
		background: #fff;
		width: 750rpx;
		height: 100rpx;
		overflow: hidden;
		z-index: 10;
		top: 87rpx;
		background-size: 100% auto !important;
	}

	.commodityList_fd1_0_c4_c0_c1 {
		width: 30rpx;
		height: 30rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.commodityList_fd1_0_c4_c0_c0 {
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
		margin: 0rpx 12rpx 0rpx 0rpx;
	}

	.commodityList_fd1_0_c3_c0 {
		width: 30rpx;
		height: 28rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.commodityList_fd1_0_c2_c0_1 {
		color: #d90b20;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		margin: 0rpx 10rpx 0rpx 0rpx;
	}

	.commodityList_fd1_0_c1_c1 {
		width: 10rpx;
		height: 18rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.commodityList_fd1_0_c1_c0_1 {
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		margin: 0rpx 10rpx 0rpx 0rpx;
		color: #d90b20;
	}

	.commodityList_fd1_0_c1_c0 {
		color: var(--benbenFontColor0);
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		margin: 0rpx 10rpx 0rpx 0rpx;
	}

	.commodityList_fd1_0_c0_c0_1 {
		font-size: 28rpx;
		font-weight: 500;
		line-height: 35rpx;
		color: #d90b20;
	}

	.commodityList_fd1_0_c0_c0 {
		color: var(--benbenFontColor0);
		font-size: 28rpx;
		font-weight: 500;
		line-height: 35rpx;
	}

	.commodityList_fd1_0_c0 {
		margin: 0rpx 0rpx 0rpx 0rpx;
	}

	.commodityList_fd1_0 {
		padding: 0rpx 32rpx 0rpx 47rpx;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
	}

	.commodityList_flex_2 {
		padding: 0rpx 24rpx 0rpx 24rpx;
	}

	.commodityList_fd2_0_c1_c2_c3 {
		color: var(--benbenFontColor2);
		font-size: 24rpx;
		font-weight: 400;
		line-height: 30rpx;
	}

	.commodityList_fd2_0_c1_c2_c2 {
		color: var(--benbenFontColor2);
		font-size: 22rpx;
		font-weight: 400;
		line-height: 30rpx;
		margin: 0rpx 0rpx 0rpx auto;
	}

	.commodityList_fd2_0_c1_c2_c1 {
		color: var(--benbenFontColor2);
		font-size: 24rpx;
		font-weight: 400;
		line-height: 27rpx;
		text-decoration: line-through;
	}

	.commodityList_fd2_0_c1_c2_c0 {
		font-size: 24rpx;
		font-weight: 400;
		color: var(--benbenFontColor2);
		line-height: 27rpx;
		text-decoration: line-through;
	}

	.commodityList_price2_fd2_0_c1_c1_c1 {
		font-size: 24rpx;
	}

	.commodityList_price1_fd2_0_c1_c1_c1 {
		font-size: 48rpx;
	}

	.commodityList_fd2_0_c1_c1_c1 {
		color: var(--benbenFontColor4);
		font-weight: 600;
	}

	.commodityList_fd2_0_c1_c1_c0 {
		color: var(--benbenFontColor4);
		font-size: 32rpx;
		font-weight: 700;
		line-height: 39rpx;
	}

	.commodityList_fd2_0_c1_c0 {
		font-size: 28rpx;
		font-weight: 700;
		color: var(--benbenFontColor0);
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		line-height: 40rpx;
	}

	.commodityList_fd2_0_c1 {
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.commodityList_fd2_0_c0 {
		width: 212rpx;
		height: 212rpx;
		border-radius: 16rpx;
	}

	.commodityList_fd2_0 {
		background: #fff;
		border-radius: 16rpx;
		margin: 24rpx 0rpx 0rpx 0rpx;
		padding: 24rpx;
		width: 100%;
	}

	.commodityList_flex_3 {
		background: #fff;
		width: 600rpx;
		background-size: 100% auto !important;
		position: relative;
		padding: 40rpx 0rpx 0rpx 0rpx;
	}

	.commodityList_fd3_3_c0_c1 {
		background: var(--benbenbgColor7);
		border-radius: 36rpx;
		font-size: 28rpx;
		color: var(--benbenFontColor3);
		width: 246rpx;
		height: 72rpx;
		line-height: 72rpx;
		margin: 0rpx 0rpx 0rpx 18rpx;
	}

	.commodityList_fd3_3_c0_c0 {
		background: var(--benbenbgColor2);
		border-radius: 36rpx;
		font-size: 28rpx;
		color: var(--benbenFontColor3);
		width: 246rpx;
		height: 72rpx;
		line-height: 72rpx;
	}

	.commodityList_fd3_3_c0 {
		padding: 24rpx 23rpx 24rpx 23rpx;
		position: fixed;
		bottom: calc(40rpx + var(--window-bottom));
		width: 600rpx;
	}

	.commodityList_fd3_2_c0_c0 {
		line-height: 45rpx;
		font-size: 28rpx;
		font-weight: 700;
		color: #333333;
	}

	.commodityList_fd3_2 {
		padding: 0rpx 10rpx 0rpx 10rpx;
	}

	.commodityList_fd3_1_c1_c1_c0 {
		line-height: 33rpx;
		font-size: 24rpx;
		font-weight: 600;
		color: #333333;
		// -webkit-line-clamp: 1;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
	}

	.commodityList_fd3_1_c1_c1 {
		background: #F8F8F8;
		// width: 160rpx;
		height: 80rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0rpx 8rpx 16rpx 8rpx;
		padding: 0rpx 16rpx 0rpx 16rpx;
	}

	.commodityList_fd3_1_c1_c0_c0 {
		line-height: 33rpx;
		font-size: 24rpx;
		font-weight: 600;
		color: var(--benbenFontColor4);
		// -webkit-line-clamp: 1;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
	}

	.commodityList_fd3_1_c1_c0 {
		border: 1px solid var(--benbenbdColor0);
		background: var(--benbenbgColor1);
		// width: 160rpx;
		height: 80rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto !important;
		margin: 0rpx 8rpx 16rpx 8rpx;
		padding: 0rpx 16rpx 0rpx 16rpx;
	}

	::v-deep .commodityList_fd3_1_c1 {
		margin: 0rpx 16rpx 28rpx 16rpx;
	}

	.commodityList_fd3_1_c0_c0 {
		line-height: 45rpx;
		font-size: 27rpx;
		font-weight: 700;
		color: #333333;
	}

	.commodityList_fd3_1_c0 {
		margin: 0rpx 24rpx 17rpx 32rpx;
	}

	.commodityList_fd3_0_c0 {
		line-height: 50rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #333333;
		margin: 0rpx 0rpx 0rpx 32rpx;
	}

	.commodityList_fd3_0 {
		background: #fff;
		margin: 0rpx 0rpx 35rpx 0rpx;
		height: 86rpx;
		background-size: 100% auto !important;
	}

	.commodityList_fd4_0_c0_c3_c3 {
		color: var(--benbenFontColor2);
		font-size: 24rpx;
		font-weight: 400;
		line-height: 30rpx;
	}

	.commodityList_fd4_0_c0_c3_c2 {
		color: var(--benbenFontColor2);
		font-size: 22rpx;
		font-weight: 400;
		line-height: 30rpx;
		margin: 0rpx 0rpx 0rpx auto;
	}

	.commodityList_fd4_0_c0_c3_c1 {
		color: var(--benbenFontColor2);
		font-size: 24rpx;
		font-weight: 400;
		line-height: 27rpx;
		text-decoration: line-through;
	}

	.commodityList_fd4_0_c0_c3_c0 {
		font-size: 24rpx;
		font-weight: 400;
		color: var(--benbenFontColor2);
		line-height: 27rpx;
		text-decoration: line-through;
	}

	.commodityList_fd4_0_c0_c3 {
		margin: 0rpx 20rpx 0rpx 20rpx;
	}

	.commodityList_price2_fd4_0_c0_c2_c1 {
		font-size: 24rpx;
	}

	.commodityList_price1_fd4_0_c0_c2_c1 {
		font-size: 48rpx;
	}

	.commodityList_fd4_0_c0_c2_c1 {
		color: var(--benbenFontColor4);
		font-weight: 600;
	}

	.commodityList_fd4_0_c0_c2_c0 {
		color: var(--benbenFontColor4);
		font-size: 32rpx;
		font-weight: 700;
		line-height: 39rpx;
	}

	.commodityList_fd4_0_c0_c2 {
		margin: 0rpx 20rpx 18rpx 20rpx;
	}

	.commodityList_fd4_0_c0_c1 {
		font-size: 28rpx;
		font-weight: 600;
		color: var(--benbenFontColor0);
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		margin: 24rpx 20rpx 16rpx 20rpx;
	}

	.commodityList_fd4_0_c0_c0 {
		width: 100%;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}

	.commodityList_fd4_0_c0 {
		background: var(--benbenbgColor1);
		background-size: 100% auto;
		margin: 0rpx 0rpx 20rpx 0rpx;
		border-radius: 16rpx;
		padding: 0rpx 0rpx 15rpx 0rpx;
	}

	.commodityList_flex_4001 {
		padding: 24rpx 0rpx 0rpx 0rpx;
	}
</style>